<template>
  <div class="HomeLand">
    <van-nav-bar title="家园" right-text="发布" @click-right="onClickRight" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="jiayuan" v-for="(item, index) in userdong" :key="index">
        <div class="jiayuan_l">
          <img :src="item.head" class="jia_dong" />
        </div>
        <div class="jiayuan_r">
          <span class="jiayuan_name"> {{ item.username }}</span>
        </div>
        <p class="jiayuan_content">
          {{ item.page1 }}
        </p>

        <div class="imgList">
          <div class="preview-image">
            <img :src="item.url" class="jiayuan_img" />
            <img :src="item.url1" class="jiayuan_img" />
            <img :src="item.url2" class="jiayuan_img" />
            <img :src="item.url3" class="jiayuan_img" />
            <img :src="item.url4" class="jiayuan_img" />
            <img :src="item.url5" class="jiayuan_img" />
          </div>
          <!-- 点赞    评论   分享 -->
          <div class="van-tabbar van-tabbar--fixed">
            <div class="van-tabbar-item van-tabbar-item--active" @click="zan">
              <div class="van-tabbar-item__icon">
                <i class="iconfont icon-dianzan1">{{ like_count }}</i>
              </div>
              <!-- <div class="van-tabbar-item__text">点赞</div> -->
            </div>
            <div class="van-tabbar-item" @click="showPopup">
              <div class="van-tabbar-item__icon">
                <i class="iconfont icon-pinglun1"></i>
              </div>
              <!-- <div class="van-tabbar-item__text">评论</div> -->
            </div>
            <div class="van-tabbar-item" @click="showShare = true">
              <div class="van-tabbar-item__icon">
                <i class="iconfont icon-fenxiang"></i>
              </div>
              <!-- <div class="van-tabbar-item__text">分享</div> -->
            </div>
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
            />
            <van-popup
              v-model="show"
              close-icon-position="top-left"
              position="bottom"
              :style="{ height: '50%' }"
            >
              <Discuss @func="refreshCommentList"></Discuss>
              <div class="row">
                <ul class="list-group" style="margin-top: 5px">
                  <li
                    class="list-group-item"
                    v-for="(item, index) in commentList"
                    :key="index"
                  >
                    <div class="van-skeleton">
                      <img
                        class="van-skeleton__avatar van-skeleton__avatar--round"
                        :src="userImg ? userImg : img"
                        alt=""
                      />
                      <div class="van-skeleton__content">
                        <h3 class="van-skeleton__title">{{ item.userName }}</h3>
                        <div class="van-skeleton__row" style="width: 100%">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                    <van-skeleton title avatar :row="3" :loading="loading" />
                  </li>
                </ul>
              </div>
            </van-popup>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { reqDong } from "@/api";
import Discuss from "@/components/Discuss/Discuss.vue";
export default {
  name: "HomeLand",
  data() {
    return {
      imgList: [],
      list: [],
      userImg: localStorage.getItem("userimg"),
      img: localStorage.getItem("Img"),
      discuss: "",
      name: "",
      isLoading: false,
      previewFullImage: true,
      size: "80px",
      content: "",
      like_count: 0,
      flg: true,
      show: false,
      showShare: false,
      userdong: [],
      commentList: [],
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      loading: false,
    };
  },
  methods: {
    //从localStorage中加载数据
    loadComment() {
      var list = JSON.parse(localStorage.getItem("item") || "[]");
      this.list = list;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    zan() {
      if (this.flg) {
        this.like_count++;
        this.flg = false;
      } else {
        this.like_count--;
        this.flg = true;
      }
    },
    refreshCommentList: function refreshCommentList() {
      var list = JSON.parse(localStorage.getItem("commentList") || "[]");
      this.commentList = list;
    },
    async commont() {
      await reqDong().then((res) => {
        console.log(res.data);
        this.userdong = res.data;
      });
    },

    showPopup() {
      this.show = true;
    },
    onClickRight() {
      this.$router.replace("/dongtai");
    },
    onRefresh() {
      setTimeout(() => {
        this.commont();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
  },
  created() {
    //评论
    this.loadComment();
    this.commont();
    this.refreshCommentList();
  },
  computed: {
    ...mapState(["userInfo,userimage"]),
  },
  components: {
    Discuss,
  },
  mounted() {
    this.loading = false;
  },
};
</script>
<style>
.HomeLand {
  padding-bottom: 50px;
}
.mint-header {
  height: 50px !important;
}
.mint-header-title {
  font-size: 22px !important;
}
.mint-button > .mint-button-text {
  font-size: 18px !important;
  margin-right: 8px;
}
.jiayuan {
  width: 100%;
  background-color: #fff;
}
.jia_dong {
  width: 60px;
  height: 60px;
  margin: 16% 16%;
  border-radius: 50%;
}
.jiayuan_l {
  width: 20%;
  height: 90px;
  float: left;
}
.jiayuan_r {
  width: 80%;
  height: 90px;
  float: right;
}
.jiayuan_name {
  position: relative;
  top: 40%;
  font-size: 20px;
}
.jiayuan_cheng {
  border: 1px solid #e6a23c;
  color: #e6a23c;
  position: relative;
  top: 10%;
  left: 2%;
}
.jiayuan_data {
  position: relative;
  top: 40%;
  right: 26%;
}
.jiayuan_content {
  font-size: 16px;
  width: 90%;
  margin: 0 5%;
}
.imgList {
  width: 90%;
  margin: 0 5%;
}
.jiayuan_img {
  width: 30%;
  height: 85px;
  margin: 1% 1%;
}
.icon-dianzan1 {
  font-size: 18px;
}
.jiayuan_pin {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid #eee;
}
.jiayuan_pin1 {
  margin: 0 10%;
}
.jiayuan_pin2 {
  margin: 0 10%;
  color: #e6a23c;
}
.jiayuan_fabu {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-top: 3%;
  background-color: #fff;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.dianji {
  color: #fff;
  background-color: #3a8ee6;
  border: none;
}
.huifu {
  width: 100%;
  height: 150px;
  border-top: 1px solid #eee;
  background-color: #fff;
}
.floor {
  font-size: 18px;
  margin: 5% 0 0 10%;
}
.jia_huil {
  width: 30%;
}
.jia_hui {
  width: 60%;
  margin: 25%;
}
.jia_huir {
  position: relative;
  float: right;
  top: -90px;
  width: 70%;
}
.jia_dongtai {
  width: 15%;
  position: fixed;
  top: 1.5%;
  right: 3%;
  z-index: 999;
  border: none;
  background: transparent;
  font-size: 17px;
}
.list-group {
  background-color: #fff;
}
.badge_content {
  width: 90%;
  font-size: 18px;
  margin: 1px 5%;
}
.van-tabbar--fixed {
  position: unset !important;
  bottom: unset;
}
.van-share-sheet__options {
  padding: 16px;
}
.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.van-nav-bar {
  background-color: #409eff;
}
.van-nav-bar__text {
  color: #fff;
}
.van-skeleton__row,
.van-skeleton__title {
  background-color: #fff;
}
.van-uploader__wrapper--disabled {
  opacity: 1;
}
</style>
